<template>
	<div>
		<ma-body>
			<ma-refresh slot="content" :safeBottom="false" :refresh="false">
				<image src="@/static/img/isBack.png" mode="aspectFill" class="backImg" @tap="toBack"></image>
				<div class="big-box">
					<div class="title-box">
						<span class="title-line"></span>
						<div class="input-text">
							<span class="jiu-font30-fff">重设密码</span>
							<span class="jiu-font32-555">找回密码后自动登录</span>
						</div>
					</div>

					<div class="input-box">
						<div class="input-item" style="padding: 6.4vw;">
							<span class="jiu-font28-aaa" style="flex-shrink: 0;">+86</span>
							<input type="number" v-model="userPhone" placeholder="请输入手机号码"
								placeholder-class="jiu-font28-555" style="font-weight: 300;" maxlength="11" />
						</div>
						
						<div class="input-item" style="margin-top: 2.67vw;">
							<div class="center">
								<span class="jiu-font28-aaa" style="flex-shrink: 0;">验证码</span>
								<input type="digit" placeholder="请输入图形验证码" placeholder-class="jiu-font28-555"
									v-model="code" maxlength="11" />
							</div>
							<image :src="imgCode" mode="heightFix" style="height: 8.53vw;" @tap="getCode"></image>
						</div>
						
						<div class="input-item top267">
							<span class="jiu-font28-aaa" style="flex-shrink: 0;">手机验证</span>
							<input type="number" v-model="userCode" placeholder="请输入验证码"
								placeholder-class="jiu-font28-555" style="font-weight: 300;" maxlength="4" />
								<span class="jiu-font24-000 send-btn" @tap="sendCode"
									style="flex-shrink: 0;">{{ sendText }}</span>
						</div>
						<div class="input-item top267" style="justify-content: space-between;padding: 6.4vw;">
							<div class="center">
								<span class="jiu-font28-aaa" style="flex-shrink: 0;">输入密码</span>
								<input @tap="oneInput" type="password" :disabled="oneDis" v-model="onePassword"
									placeholder="8～30位字符含数字、字母" placeholder-class="jiu-font28-555"
								 style="width: 100%;font-weight: 300;" v-show="!onePass" maxlength="30" />
								<input @tap="oneInput" type="text" :disabled="oneDis"
									style="width: 100%;font-weight: 300;" v-model="onePassword"
									placeholder="8～30位字符含数字、字母" placeholder-class="jiu-font28-555" v-show="onePass" maxlength="30" />
							</div>
							<image src="../../static/img/noLook.png" mode="aspectFill" class="look-img"
								v-show="!onePass" @tap="onPass"></image>
							<image src="../../static/img/look.png" mode="aspectFill" class="look-img" v-show="onePass"
								@tap="onPass"></image>
						</div>
						<div class="input-item top267" style="padding: 6.4vw;justify-content: space-between;">
							<div class="center">
								<span class="jiu-font28-aaa" style="flex-shrink: 0;">再次输入</span>
								<input type="password" :disabled="twoDis" v-model="twoPassword" placeholder="请再次输入密码"
									placeholder-class="jiu-font28-555" @tap="twoInput"
									style="width: 100%;font-weight: 300;" v-show="!twoPass" maxlength="30" />
								<input type="text" :disabled="twoDis" v-model="twoPassword" placeholder="请再次输入密码"
									placeholder-class="jiu-font28-555" @tap="twoInput"
									style="width: 100%;font-weight: 300;" v-show="twoPass" maxlength="30" />
							</div>
							<image src="../../static/img/noLook.png" mode="aspectFill" class="look-img"
								v-show="!twoPass" @tap="onTwoPass"></image>
							<image src="../../static/img/look.png" mode="aspectFill" class="look-img" v-show="twoPass"
								@tap="onTwoPass"></image>
						</div>
					</div>
				</div>
			</ma-refresh>
			<bottom-box slot="footer">
				<span class="login-btn" @tap="onCancel" v-if="resetType == 'reset'">确认修改</span>
				<span class="login-btn" @tap="toIndex" v-else-if="resetType == 'login'">登录</span>
			</bottom-box>
		</ma-body>
		<u-modal v-model="cancelModal" :content="content" @confirm="toIndex" :show-cancel-button="true"></u-modal>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				userPhone: '',
				userCode: '',
				onePassword: '',
				twoPassword: '',
				sendText: '发送',
				oneType: 'password',
				twoType: 'password',
				onePass: false,
				twoPass: false,
				resetType: '',
				cancelModal: false,
				content: '确定修改密码吗？',
				count: 0,
				imgCode: '',
				code: '',
				uuid: '',
			}
		},
		methods: {
			onCancel() {
				if (this.userCode.length == 0) return uni.showToast({
					icon: 'none',
					title: '请输入验证码'
				})
				if (this.twoPassword.length < 8 || this.onePassword.length < 8) return uni.showToast({
					icon: 'none',
					title: '您所输入的密码不足八位'
				})
				if (!this.passWord) return uni.showToast({
					icon: 'none',
					title: '两次输入的密码不一致，请重新输入'
				})
				this.cancelModal = true;
			},
			onPass() {
				this.onePass = !this.onePass;
				this.oneType = this.onePass ? 'text' : 'password';
			},
			onTwoPass() {
				this.twoPass = !this.twoPass;
				this.twoPassType = this.twoPass ? 'text' : 'password';
			},
			oneInput() {
				if (this.userCode.length == 0 || this.userPhone.length == 0) return uni.showToast({
					icon: 'none',
					title: '请先完成手机号验证'
				})
			},
			twoInput() {
				if (this.userCode.length == 0 || this.userPhone.length == 0) return uni.showToast({
					icon: 'none',
					title: '请先完成手机号验证'
				})
				this.twoDis = false;
			},
			// 获取图片验证码
			async getCode(){
				let res = await this.$u.api.getCode();
				this.imgCode = 'data:image/png;base64,'+ res.img;
				this.uuid = res.uuid;
			},
			async sendCode() {
				if(this.$u.test.mobile(this.userPhone) == false){
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号'
					})
					return;
				}
				
				if(this.code.length == 0){
					uni.showToast({
						icon: 'none',
						title: '请先输入图形验证码！'
					})
					return;
				}
				const TIME_COUNT = 60;
				if (this.count > 0 && this.count <= TIME_COUNT) return;
				
				let data = {
					phone: this.userPhone,
					code: this.code,
					uuid: this.uuid
				}
				this.$u.api.onSendCode(data).then(res=>{
					uni.showToast({
						icon: 'none',
						title: '验证码已发送，请注意查收'
					})
					if (!this.timer) {
						this.count = TIME_COUNT;
						this.timer = setInterval(() => {
							if (this.count > 0 && this.count <= TIME_COUNT) {
								this.count--;
								this.sendText = `${this.count}秒`
								return;
							} else {
								clearInterval(this.timer);
								this.timer = null;
								this.sendText = '再次发送'
							}
						}, 1000)
					}
				}).catch(err=>{
					this.getCode();
					this.code = ''
				});
				
			},
			async toIndex() {
				console.log(this.passWord);
				if (this.userCode.length == 0) return uni.showToast({
					icon: 'none',
					title: '请输入验证码'
				})
				if (this.twoPassword.length < 8 || this.onePassword.length < 8) return uni.showToast({
					icon: 'none',
					title: '您所输入的密码不足八位'
				})
				if (!this.passWord) return uni.showToast({
					icon: 'none',
					title: '两次输入的密码不一致，请重新输入'
				})
				let data = {
					phone: this.userPhone,
					phoneCode: this.userCode,
					password: this.twoPassword
				};
				this.$u.api.onResetPassword(data).then(res => {
					let data = {
						phone: this.userPhone,
						password: this.twoPassword,
					};
					if (this.resetType == 'login') {
						uni.showToast({
							icon: 'none',
							title: '修改成功，跳转至应用内'
						})
						this.$u.api.onLogin(data).then(re => {
							uni.setStorageSync('access_token', re.access_token);
							uni.switchTab({
								url: '/pages/index/index'
							})
						});
					} else if (this.resetType == 'reset') {
						uni.navigateBack({
							delta: 1
						})
					}
				})
				// uni.switchTab({
				// 	url: '/pages/index/index'
				// })
			},
		},
		computed: {
			passWord() {
				if (this.onePassword === this.twoPassword) {
					return true;
				} else return false;
			},
			oneDis: {
				get() {
					if (this.userCode.length != 0 || this.userPhone.length != 0) return false;
					else return true;
				},
				set() {}
			},
			twoDis: {
				get() {
					if (this.userCode.length != 0 || this.userPhone.length != 0) return false;
					else return true;
				},
				set() {}
			}
		},
		onLoad(e) {
			this.resetType = e.resetType;
			this.getCode();
		}
	}
</script>

<style lang="scss">
	.jiu-font28-555 {
		font-weight: 300;
	}

	input {
		width: 100%;
		font-size: 3.73vw;
	}

	.look-img {
		width: 6.4vw;
		height: 6.4vw;
	}

	.center {
		display: flex;
		align-items: center;
		width: 100%;
	}

	.top267 {
		margin-top: 2.67vw;
	}

	.big-box {
		background-color: #000000;
		padding-top: 17.07vw;
		display: flex;
		flex-direction: column;
		position: relative;

		.title-box {
			display: flex;
			padding-left: 5.33vw;

			.title-line {
				display: block;
				width: 1.07vw;
				height: 17.07vw;
				border-radius: 12.08vw;
				background: linear-gradient(180deg, #A972FF 0%, #FFCE80 100%);
				margin-right: 3.2vw;
			}

			.input-text {
				display: flex;
				flex-direction: column;
			}
		}

		.input-box {
			margin-top: 12.8vw;
			padding-left: 5.33vw;

			.input-item {
				display: flex;
				align-items: center;
				padding: 4.8vw 5.33vw;
				padding-left: 6.8vw;
				background-color: #1B1B1B;
				border-radius: 12.8vw 0 0 12.8vw;
				font-size: $jiu-font28;
				font-weight: 300;
				color: #FFCE80;

				.jiu-font28-aaa {
					width: 15vw;
					margin-right: 4.27vw;
				}

				.send-btn {
					width: 17.07vw;
					line-height: 8.53vw;
					text-align: center;
					border-radius: 5.33vw;
					background-color: #A972FF;
					box-shadow: 0vw 1vw 2vw rgba(71, 12, 114, 0.4800);
					margin-left: 4.27vw;
				}
			}
		}

		.read-text {
			margin-top: 3.47vw;
			padding-left: 5.33vw;
			display: block;

			.jiu-font24-555 {
				label {
					color: #FFCE80;
				}
			}
		}
	}

	.login-btn {
		display: block;
		width: 89.33vw;
		line-height: 12.8vw;
		text-align: center;
		background-color: #A972FF;
		box-shadow: 0vw 3vw 5vw rgba(71, 12, 114, 0.4800);
		border-radius: 6.4vw;
		color: #000000;
		font-size: 3.73vw;
		font-weight: 500;
	}
</style>
